<template>
  <div id="app">
    <div style="display: flex;height: 100%;" >
      <div :style="sideStyle" class="div-layout">
        <el-menu router style="flex: 1;border: none" v-show="expandFlag ==='<'">
          <el-menu-item index="/helloFlex">hello flex</el-menu-item>
          <el-menu-item index="/FlexDemo">FlexDemo</el-menu-item>
        </el-menu>
        <div style="width: 15px;display: flex;justify-items: center;align-items: center"><span @click="expand">{{expandFlag}}</span></div>
      </div>

      <div style="flex: 1" class="div-layout">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      expandFlag:"<",
      sideStyle:{
        width:"200px",
        display:"flex",
        flexDirection:"row",
      }
    }
  },
  methods: {
    expand(){
      if (this.expandFlag === "<") {
        this.expandFlag = ">";
        this.sideStyle.width="20px"
      }else{
        this.expandFlag = "<";
        this.sideStyle.width="200px"
      }

    }
  },

}
</script>

<style>

html, body, #app {
  height: 100%;
  padding: 0;
  margin: 0;
}
.div-layout {
  border: 1px solid #ccc;
  box-sizing: border-box;
}


</style>
